<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="demo2.css">
    
</head>

<body>
    <!-- 最顶部页面固定栏设计,包括logo，首页，用户等六个小模块 -->
    <div class="topKe">
        <div class="top">
            <div class="topLogo">
                <div><img src="https://zhang0228.oss-cn-wulanchabu.aliyuncs.com/yunlogo.png" alt=""></div>
                &nbsp云顶书院
            </div>
            <div class="topIndex">
                <a href="http://127.0.0.1:5501/%E7%AE%A1%E7%90%86%E5%91%98%E7%AB%AF%20%E9%A6%96%E9%A1%B5/shouye.html"><span class="iconfont icon-shouye"></span>
                    首页</a>
            </div>
            <div class="topBook">
                <a href="http://127.0.0.1:5501/%E4%B9%A6%E7%B1%8D%E7%AE%A1%E7%90%86%20%20%E5%AE%A1%E6%89%B9%E5%80%9F%E9%98%85%E7%94%B3%E8%AF%B7%20%E5%80%9F%E5%87%BA/demo2.html" style="color: #254375;"><span class="iconfont icon-tushu"></span>
                    图书</a>
            </div>
            <div class="topUser">
                <a href="http://127.0.0.1:5500/html/personUser/personUser.html"><span class="iconfont icon-geren2"></span>
                    个人</a>
            </div>
            <div class="topSer">
                <a href=""><span class="iconfont icon-banli"></span>
                    服务办理</a>
            </div>
            <div class="topSearch">
                <input type="text">
                <div class="sousou">
                    <span class="iconfont icon-sousuoxiao"></span>
                </div>
            </div>
        </div>
    </div>
    </div>
    <!-- 设置一个空盒子来占顶部固定栏所占位置，从而不遮挡下面内容 -->
    <div class="prevent"></div>
    <div class="middle">
        <div class="middle-left">
            <div class="middle-left1">
                馆内书籍情况
            </div>
            <div class="middle-line1"></div>
            <div class="middle-left2">
                添加书籍
            </div>
            <div class="middle-line2"></div>
            <div class="middle-left3">
                删除/更改书籍
            </div>
            <div class="middle-line3"></div>
            <div class="middle-left4">
                <a href="">审批借阅书籍</a>
            </div>
        </div>
        <div class="middle-right">
            <div class="middle-right-top">
                图书 > 审批借阅书籍 > 借阅申请
            </div>
            <div class="middle-right-middle">
                <div class="middle-right-middle1">借阅申请</div>
                <div class="middle-right-line"></div>
                <div class="middle-right-line2"></div>
                <div class="middle-right-middle2">归还申请</div>
            </div>
            <div class="middle-right-bottom"></div>
        </div>
    </div>

    <!-- 底部 -->
    <div class="footer">
        <div class="word">
            <p>友情链接</p>
            <br />
            <p><a href="https://www.tyut.edu.cn/" target="_blank">太原理工大学</a></p>
            <br />
            <p><a href="https://www.yunliyunwai.cn/">云里云外开源社区</a></p>
        </div>
    </div>

</body>
</html>